<template>
    <div id="app">

        <!--header-->
        <el-row>
            <el-col :span="18" :offset="3">
                <div class="grid-content bg-purple">
                    <div class="imgl">
                        <img src="../../assets/img/logo1.png" height="127px" width="302px ">
                    </div>
                    <div class="header">
                        <ul>
                            <li>
                                <a href="/login" ><div class="icon-nav">
                                    <i class="el-icon-user"></i>
                                </div><span class="nav-txt">信息门户</span></a>
                            </li>
                            <li>
                                <a href="/login" ><div class="icon-nav">
                                    <i class="el-icon-loading"></i>
                                </div><span class="nav-txt">English</span></a>
                            </li>
                            <li>
                                <a href="/login" ><div class="icon-nav">
                                    <i class="el-icon-search"></i>
                                </div><span class="nav-txt">查询更多</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!--跑马灯-->
        <el-row>
            <el-col :span="24"><div class="grid-content " >
                <el-carousel indicator-position="outside" height="644px">
                    <el-carousel-item v-for="item in imgURL" :key="item">
                        <h3><img :src="item" width="1428" height="644px"/></h3>
                    </el-carousel-item>
                </el-carousel>
            </div></el-col>
        </el-row>

<!--        <%&#45;&#45;新闻专项&#45;&#45;%>-->
        <el-row>
            <el-col :span="24" :gutter="20">
                <div class="grid-content " style="margin-top: 30px">

                    <!--新闻专项-->
                    <el-col :span="6" :offset="3">
                        <div class="grid-content">
                            <el-card class="box-card">
                                <div slot="header" class="clearfix">
                                    <span>中央党新闻</span>
                                </div>
                                <div v-for="o in news" :key="o" class="text item">
                                    <el-link
                                            :underline="false"
                                            target="_blank"
                                            @click="skip(o.id)">
                                        {{ o.title }}
                                    </el-link>
                                </div>
                            </el-card>
                        </div>
                    </el-col>

    <!--                <%&#45;&#45;通知公告&#45;&#45;%>-->
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>通知公告</span>
                            </div>
                            <div class="block" style="margin: 0 20px">
                                <el-timeline :reverse="false">
                                    <el-timeline-item
                                            v-for="(activity, index) in activities"
                                            :key="index"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            :timestamp="activity.time">
                                    <span @click="notices(activity)" style="color: darkorange">
                                        <a>{{activity.title}}</a>
                                    </span>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-card>
                    </div></el-col>

    <!--                <%&#45;&#45;medicalFrontier&#45;&#45;%>-->
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>党的发展史</span>
                            </div>
                            <div v-for="o in news2" :key="o" class="text item">
                                <el-link :underline="false"
                                         @click="skip1(o.id)"
                                         target="_blank">{{ o.title }}</el-link>
                            </div>
                        </el-card>
                    </div></el-col>

                </div>
            </el-col>
        </el-row>

        <!--医院服务-->
        <el-row>
            <el-col :span="24"><div class="grid-content" >
                <div class="con_two">
                    <div class="jz">
                        <div class="xy_fw">
                            <div class="xy_fw_nav">
                                <h1>党内 · 服务</h1>
                            </div>
                            <div class="xy_fw_font">
                                <ul>
                                    <li><a title="患者预约系统" @click="click1"
                                           target="_blank">
                                        <h1 class="post_bg"><img src="../../assets/img/fw/fw_14.png">
                                        </h1><span class="post"> 三会一课</span>
                                    </a></li>

                                    <li><a  @click="click2" title="内网"
                                          target="_blank">
                                        <h1><img src="../../assets/img/fw/fw_01.png">
                                        </h1><span> 内网</span>
                                    </a></li>

                                    <li><a @click="selectbranch1()" title="重点科室"
                                          target="_blank">
                                        <h1><img src="../../assets/img/fw/fw_02.png">
                                        </h1><span> 重点支部</span>
                                    </a></li>

                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

            </div></el-col>
        </el-row>

        <!--选择部门-->
        <el-dialog
                title="选择支部"
                :visible.sync="dialogVisible1"
                width="30%"
                @close="dialogClose">
            <!--:model绑定表单数据-->
            <el-form label-width="80px" :model="editForm" ref="addFormRef">
                <el-form-item label="部门" prop="deptid">
                    <el-select v-model="editForm.id" placeholder="请选择">
                        <el-option
                                v-for="item in dept"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="selectbranch()">确 定</el-button>
          </span>
        </el-dialog>

        <!--footer-->
        <div id="footer">
            <div class="fot_bg">
                <div class="fot_bg_left">
                    <p>地 址 : P屏南县古峰镇长汾社区梨园路120号 &nbsp;Address: No. 1, Xianghe Road, Xinzheng, P. R. China<br>邮 编 : 451191
                        &nbsp; &nbsp;招生电话: 0371-62508666 &nbsp; &nbsp;451191 &nbsp; TEL: +86-0371-62508666<br>版权所有 :
                        Copyright©2007-2022 Henan University of Engineering , - 网站地图 - <span><img
                                src="" title="" alt=""
                                width="16" height="16"></span><a href="https://beian.miit.gov.cn/">豫ICP备
                            14017577号-2</a></p>
                </div>
            </div>
            <div class="fot_bg_mid">
                <ul>

                    <li><img src="../../assets/img/fw/wb_img.png"><span>官方微博</span>
                    </li>
                    <li><img src="../../assets/img/fw/wx_img.png"><span>官方微信</span>
                    </li>

                </ul>
            </div>
            <div class="fot_bg_right">
                <ul>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59790)'>新闻网</a></li>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59791)'>招聘网</a></li>
                    <li><a href="" title=""
                           onclick='_addDynClicks("wburl", 1681657356, 59792)'>人才引进</a></li>
                    <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59793)'>校历</a></li>
                    <li><a href="" title="" onclick='_addDynClicks("wburl", 1681657356, 59794)'>医院地图</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>

<!--        <%&#45;&#45;通知弹框&#45;&#45;%>-->
        <el-dialog
                title="通知公告"
                :visible.sync="dialogVisible"
                :before-close="handleClose">
            <h2 style="color: #dc143c; margin-bottom: 30px">{{oneNotice.title}}</h2>
            <pre style="line-height: 28px; word-wrap: break-word;white-space: pre-wrap;">{{oneNotice.content}}</pre>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return{
                imgURL:['https://www.ztbu.edu.cn/attachment/core/label/2022_10/28_11/fd4f702f0e495257.jpg',
                    'https://www.ztbu.edu.cn/attachment/core/label/2022_10/28_11/0131f5391297871e.jpg',
                    'https://www.ztbu.edu.cn/attachment/core/label/2022_10/28_11/718d15ebb0fc1a97.jpg',
                    'https://www.ztbu.edu.cn/attachment/core/label/2022_10/28_11/53858377ef5a7ebd.jpg'],
                // imgURL:['../../assets/img/menu/bg_1.jpg','../../assets/menu/img/bg_2.jpg','../../assets/menu/img/bg_3.jpg','../../assets/menu/img/bg_4.jpg'],
                indexMenu:[],
                dialogVisible: false,
                activities: [],
                oneNotice:{},
                news:[],
                news2:[],
                editForm: {},
                dialogVisible1:false,
                dept:[],
            }
        },
        created() {
            this.initMenu();
            this.initNew1();
            this.initNew2();
            // document.querySelector('body').setAttribute('style', 'background-color:#f6f6f6')
        },
        methods: {
            selectbranch1(){
                this.dialogVisible1=true;
                this.branch1();
            },
            selectbranch(){
                this.dialogVisible1=false;
                this.$router.push({path:"/branch",query:{id:this.editForm.id}})
            },
            branch1(){
                this.$http.get("/system/branch/list").then(result=>{
                    console.log("==============================================")
                    console.log(result)
                    this.dept = result.data.data;
                    console.log( this.dept)
                });
            },
            click1(){
                this.$router.push({path:"/reservation"})
            },
            click2(){
                this.$router.push({path:"/"})
            },

            skip(id){
                this.$router.push({
                    path:"/newsMuban",
                    query: {
                        param: id
                    }
                });
            },
            skip1(id){
                this.$router.push({
                    path:"/phylogeny",
                    query: {
                        param: id
                    }
                });
            },
            initMenu(){
                this.$http.get("/notice/list").then(resp=>{
                    this.activities = resp.data.data;
                })
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            notices(row){
                this.dialogVisible = true;
                this.oneNotice = row;
            },

            initNew1(){
                this.$http.get("/system/news/newkind1").then(resp=>{
                    this.news = resp.data.data;
                })
            },

            initNew2(){
                this.$http.get("/system/news/newkind2").then(resp=>{
                    this.news2 = resp.data.data;
                })
            },

        },
    }
</script>

<style scoped>
    .imgl{
        float: left;
    }
    html,body,#app{
        width: 100%;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }
    .box-card{
        height: 380px;
    }
    * {
        /*margin: 0;*/
        /*padding: 0;*/
        list-style: none;
        font-family: '微软雅黑';}
    img {vertical-align: top;}
    a {text-decoration: none;}
    a:hover {text-decoration: none;color: #538191;}

    .el-col {border-radius: 4px;}
    .bg-purple-dark {background: #538191;}
    .bg-purple {background: #fff;}
    .grid-content { min-height: 100px;}

    /********header***********/
    .header{width: 350px;float: right;height: 100px;}

    .header ul li:first-child {border-left: 1px solid #e4e4e4;}

    .header ul li {
        margin-top: 10px;
        position: relative;
        width: 20%;
        text-align: center;
        font-size: 20px;
        list-style-type: none;
        float: left;
        border-right: 1px solid #e4e4e4;
    }

    .header ul li a {
        color: #333;
        font-size: 20px;
        display: block;
        height: 100px;
        position: relative;
        z-index: 1;
    }
    .header ul li a .icon-nav {
        width: 37px;
        height: 32px;
        margin: 20px 0 0 0;
        display: inline-block;
    }
    .header ul li:hover{
        background-color: #009994;
        color: #fff;
    }
    .header ul li a:hover{
        color: #fff;
    }
    .header .nav-txt {
        display: block;
        font-size: 16px;
    }

    /***********menu**********/
    .nav{
        margin:0 auto;
        height: 55px;
        position:relative;
        padding:25px 0px 0px 15px;
    }
    .nav li{
        width:135px;
        float: left;
        position: relative;
    }
    .nav li.line{
        width:1px;
        padding-top:15px;
        display:block;
    }
    .nav li>a{
        display: block;
        font-size:18px;
        color: #fff;
        height: 55px;
        line-height: 55px;
        text-align: center;
    }

    .nav li.on>a,.nav li:hover>a{
        background-color:#6b86a0;
        color:#ffffff;
        font-weight:normal!important;
        border-radius-left-top:2px ;
    }

    .nav li.on,.nav li:hover .two-nav{
        background: #6b86a0;
        display: block;
        padding-top: 0px;
        margin-top: -1px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    .two-nav{
        position: absolute;
        left: 0px;
        width: 150px;
        margin-top:-1px;
        z-index: 990;
        display: none;
    }
    .two-nav a{
        display: block;
        height: 45px;
        line-height:45px;
        text-align: center;
        color: #ffffff;
        font-size: 15px;
        background: #6b86a0;
    }

    .two-nav a:hover{
        background: #538191;
    }

    .el-carousel__item h3 {
        opacity: 0.75;
        line-height: 644px;
        margin: 0;
    }

    /***********ztzl**********/
    .con_two{width:100%;margin-top:45px;}
    .jz {width: 1280px;margin: 0 auto;}
    /*服务*/
    .xy_fw{width:1280px;height:395px;}
    .xy_fw_nav{width:1280px;height:74px;line-height:74px;}
    .xy_fw_nav h1{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:0em;}
    .xy_fw_nav h2{width:150px;font-size:20px;color:#538191;border-bottom:4px #f29503 solid;margin:0 auto;text-align:center;text-indent:2em;}

    .xy_fw_font{width:1280px;}
    .xy_fw_font ul li{width:400px;float:left;padding-top:37px;text-align: center;}
    .xy_fw_font ul li h1{width:100px;height:85px;padding-top:15px;;background:#538191;border-radius: 100px;text-align:center;margin:0 auto;}
    .xy_fw_font ul li h1 img{-webkit-transition:all 4s ease-in-out; width: 60px; padding-top: 10px}
    .xy_fw_font ul li h1 img:hover{-webkit-transform:rotate(360deg);
        -o-transform:rotate(360deg) ;
        -mo-transform:rotate(360deg) ;
        transform:rotate(360deg) ;}
    .xy_fw_font ul li span{line-height:46px;text-align:center;font-size:18px;}
    .post_bg {
        background: #e36521 !important;
    }

    /***********footer**********/
    #footer{width:100%;background:#538191;padding:20px 0px; height: 180px}
    .fot_bg{width:1300px;margin:0 auto;}
    .fot_bg_left{float:left;line-height:38px;padding:20px 0px;color:#ced6e4;padding-right:30px;}

    .fot_bg_left a{color:#fff!important;}
    .fot_bg_left span{pading-top:3px;}
    .fot_bg_mid{float:left;}
    .fot_bg_mid ul li{width:111px;float:left;padding-left:30px;text-align:center;}
    .fot_bg_mid ul li img{width:111px;height:111px;}
    .fot_bg_mid ul li span{line-height:50px;color:#fff;}


    .fot_bg_right{width:210px;float:left;}
    .fot_bg_right ul li{float:left;line-height:45px;padding-left:48px;font-size: 13px;}
    .fot_bg_right ul li a{color:#ced6e4;}



    /*******************/
    .yq-banner-inner {
        width: 100%;
        min-width: 1150px;
        height: 260px;
        display: block;
        text-align: center;
        background-size: cover;
        background: url(../../assets/img/bg.png) no-repeat center center;
        background-size:100% 260px;
    }

    .gaga{
        margin: 10px auto;
    }
    body{color: #721c24;}
    el-button{
        line-height: 0;
    }
</style>